<template>
  <div class="item text-xs flex py-3 px-2 hover:bg-slate-200">
    <div class="flex-auto flex items-center justify-between pr-4">
      <span class="icon-hover" @click="toggleName"> {{ info.name }}</span>
      <div class="icon-action hidden text-gray-400">
        <IconPark title="添加到" class="icon-hover" :icon="Add" size="14" @click="toggleAdd" />
      </div>
    </div>
    <div class="w-1/4 icon-hover">{{ info.artists[0].name }}</div>
    <div class="w-1/4 icon-hover">{{ info.album.name }}</div>
    <div class="w-20">{{ formatTimeStamp(info.duration) }}</div>
  </div>
</template>

<script lang="ts" setup>
import type { Song } from '@/types/song'
import { useFormat } from '@/hooks/useFormat'
import IconPark from '@/components/icon-park/IconPark.vue'
import { Add } from '@icon-park/vue-next'

const props = defineProps<{ info: Song }>()

const emit = defineEmits<{
  (e: 'toggleName', value: Song): void
  (e: 'toggleAdd', value: Song): void
}>()

const { formatTimeStamp } = useFormat()
const toggleName = () => {
  emit('toggleName', props.info)
}
const toggleAdd = () => {
  emit('toggleAdd', props.info)
}
</script>

<style lang="less" scoped>
.item {
  &:hover {
    .icon-action {
      @apply block;
    }
  }
}
</style>
